<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript">
            var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
            var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var aoMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessoryothers');
			var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            var ctYesnoStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctYesnoXmlLoader.getXml()
                });
            
            
            var isDZBuyCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.isdzbuy'),
					id: 'isDZBuy',
					name: 'isDZBuy',
					editable: false,
					valueField: 'code',
				    store: ctYesnoStore,
				    displayField:'description',
				    anchor: '76%',
					width: '80%',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
				    selectOnFocus:true,
					mode: 'local'
				});
			
			var idValue = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
			var input = getPrarmeterValue(window.location, 'input');

			var piAoForm
            var piAoStore;
            var piAoGrid;
            
            var piXMLReader = new Ext.data.XmlReader({
                   record: 'item'
               }, [{
                   name: 'id',
                   mapping: 'id'
               }, {
                   name: 'ctProductFamily',
                   mapping: 'ctProductFamily'
               }, {
                   name: 'ctMachineType',
                   mapping: 'ctMachineType'
               }, {
                   name: 'type',
                   mapping: 'type'
               }, {
                   name: 'orderNumber',
                   mapping: 'orderNumber'
               }, {
                   name: 'yarnNumber',
                   mapping: 'yarnNumber'
               }, {
                   name: 'ctDesignType',
                   mapping: 'ctDesignType'
               }, {
                   name: 'style',
                   mapping: 'style'
               }, {
                   name: 'customerLinkman',
                   mapping: 'customerLinkman'
               }, {
                   name: 'model',
                   mapping: 'model'
               }, {
                   name: 'ctSeasonNumber',
                   mapping: 'ctSeasonNumber'
               }, {
                   name: 'ctSeasonNumberCode',
                   mapping: 'ctSeasonNumberCode'
               }, {
                   name: 'reference',
                   mapping: 'reference'
               }, {
                   name: 'createDate',
                   mapping: 'createDate'
               }, {
                   name: 'ctVersion',
                   mapping: 'ctVersion'
               }, {
                   name: 'patronageNumer',
                   mapping: 'patronageNumer'
               }, {
                   name: 'front',
                   mapping: 'front'
               }, {
                   name: 'back',
                   mapping: 'back'
               }, {
                   name: 'sleeves',
                   mapping: 'sleeves'
               }, {
                   name: 'bottomThrum',
                   mapping: 'bottomThrum'
               }, {
                   name: 'sleevesThrum',
                   mapping: 'sleevesThrum'
               }, {
                   name: 'necklineThrum',
                   mapping: 'necklineThrum'
               }, {
                   name: 'needle',
                   mapping: 'needle'
               }, {
                   name: 'weight',
                   mapping: 'weight'
               }, {
                   name: 'comment',
                   mapping: 'comment'
               }, {
                   name: 'customerID',
                   mapping: 'customerID'
               }, {
                   name: 'photoName',
                   mapping: 'photoName'
               }, {
                   name: 'chartName',
                   mapping: 'chartName'
               }, {
                   name: 'biMeasureSpecificationId',
                   mapping: 'biMeasureSpecificationId'
               }, {
                   name: 'biMeasureSpecificationName',
                   mapping: 'biMeasureSpecificationName'
               }, {
                   name: 'yarnName',
                   mapping: 'yarnName'
               }, {
                   name: 'frontPhotoName',
                   mapping: 'frontPhotoName'
               }, {
                   name: 'backPhotoName',
                   mapping: 'backPhotoName'
               }, {
                   name: 'photoName',
                   mapping: 'photoName'
               }, {
                   name: 'chartName',
                   mapping: 'chartName'
               }, {
                   name: 'ctCollarType',
                   mapping: 'ctCollarType'
               }, {
                   name: 'customerName',
                   mapping: 'customerName'
               }, {
                   name: 'customerDepartment',
                   mapping: 'customerDepartment'
               }, {
                   name: 'referenceAs',
                   mapping: 'referenceAs'
               }, {
                   name: 'createDate',
                   mapping: 'createDate'
               },{
               		name: 'ctStatureCode',
               		mapping: 'ctStatureCode'
               },{
					name: 'ctStatureCode',
					mapping: 'ctStatureCode'
               }]);
                
              var piXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=11&id=' + idValue);
              
              var piRecord = piXMLReader.readRecords(piXmlLoader.getXml()).records[0];
              
              var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
								 '<tr><td style="background:#eeeeee; width: 15%;">',
								 message.get('message.list.id'), '</td><td>{id}</td>', 
								 '<td style="background:#eeeeee;width: 15%;">', 
								 piMessage.get('ui.productidentification.style'), 
								 '</td><td>{style}</td><td style="background:#eeeeee;">', 
								 piMessage.get('ui.productidentification.seasonnumber'), 
								 '</td><td>{ctSeasonNumber}</td>', '<td style="background:#eeeeee;">', 
								 referenceMessage.get('ui.reference.reference'), 
								 '</td><td>{reference}</td></tr>', 
								 
								 
								 '<tr><td style="background:#eeeeee;">', 
								message.get('message.edit.createdate') + "(d/m/Y)",
								 '</td><td>{createDate}</td><td style="background:#eeeeee;">', 
								piMessage.get('ui.productidentification.designtype'), 
								 '</td><td>{ctDesignType}</td><td style="background:#eeeeee;">', 
								 piMessage.get('ui.productidentification.chartversion'), 
								 '</td><td>{ctVersion}</td><td style="background:#eeeeee;">', 
								 piMessage.get('ui.productidentification.referenceas'), 
								 '</td><td>{referenceAs}</td></tr>',
								 
								 '<tr><td style="background:#eeeeee;">', 
								 referenceMessage.get('ui.reference.weight') + '(Kg)', 
								 '</td><td>{weight}</td><td style="background:#eeeeee;">', 
								 message.get('message.edit.collar'), 
								 '</td><td>{ctCollarType}</td><td style="background:#eeeeee;">', 
								 fcMessage.get('ui.francecustomer.name'), 
								 '</td><td>{customerName}</td><td style="background:#eeeeee;">', 
								 fcMessage.get('ui.francecustomer.department'), 
								 '</td><td>{customerDepartment}</td></tr>',
								 
								 '<tr><td colspan="8">',
								 //'<img width="120" src="../../_temp/{frontPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 //'<img width="120" src="../../_temp/{backPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 '<img width="120" src="../../_temp/{chartName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
								 '<img width="120" src="../../_temp/{photoName}"/>',
								 '</td></tr>',
								 '</tbody></table>'];
              var itemTpl = new Ext.Template(itemTplMarkup);

	  			var selectAccessoryOthersCallback = function(aoId, applicationReference, accessoryReference, customerName, customerDepartment, 
	  					customerReference,customerColor,factoryNameCN,addressFactory, 
	  					photo1Name, photo2Name,ctApplicationType,ctAccessoryType,
	  					ctAccessoryTypeCode){
	  				document.getElementById('aoId').value = aoId;
	  				if(applicationReference != ''){
	  					document.getElementById('applicationReference').value = applicationReference;
	  				}
	  				if(accessoryReference != ''){
	  					document.getElementById('applicationReference').value = '';
	  					document.getElementById('accessoryReference').value = accessoryReference;
	  				}
	  				document.getElementById('accessoryReference').value = accessoryReference;
	  				document.getElementById('ctApplicationType').value = ctApplicationType;
	  				document.getElementById('ctAccessoryType').value = ctAccessoryType;
	  				document.getElementById('customerReference').value = customerReference;
	  				document.getElementById('customerColor').value = parent.selectedAccessoryOthers.customerColor;
	  				if(parent.selectedAccessoryOthers.ctSupplyTypeCode == '01'){
	  					document.getElementById('factoryNameCN').value = parent.selectedAccessoryOthers['biFranceCustomer.name'];
	  					document.getElementById('factoryNameEN').value = parent.selectedAccessoryOthers['biFranceCustomer.department'];
	  				}else if (parent.selectedAccessoryOthers.ctSupplyTypeCode == '02'){
	  					document.getElementById('factoryNameCN').value = parent.selectedAccessoryOthers.factoryNameCN;
	  					document.getElementById('factoryNameEN').value = parent.selectedAccessoryOthers.factoryNameEN;
	  				}else{
	  					document.getElementById('factoryNameCN').value = 'DZ';
	  					document.getElementById('factoryNameEN').value = '';
	  		  		}

	  				document.getElementById('unitNumberSpan').innerHTML = '(' + parent.selectedAccessoryOthers.ctUnit  + ')'
	  				Ext.getCmp('ctCareLabelMaterial1').setValue(parent.selectedAccessoryOthers.ctCareLabelMaterial1);
	  				Ext.getCmp('percentage1').setValue(parent.selectedAccessoryOthers.percentage1);
	  				Ext.getCmp('ctCareLabelMaterial2').setValue(parent.selectedAccessoryOthers.ctCareLabelMaterial2);
	  				Ext.getCmp('percentage2').setValue(parent.selectedAccessoryOthers.percentage2);
	  				Ext.getCmp('ctCareLabelMaterial3').setValue(parent.selectedAccessoryOthers.ctCareLabelMaterial3);
	  				Ext.getCmp('percentage3').setValue(parent.selectedAccessoryOthers.percentage3);
	  				Ext.getCmp('ctCareLabelMaterial4').setValue(parent.selectedAccessoryOthers.ctCareLabelMaterial4);
	  				Ext.getCmp('percentage4').setValue(parent.selectedAccessoryOthers.percentage4);
	  				Ext.getCmp('ctCareLabelMaterial5').setValue(parent.selectedAccessoryOthers.ctCareLabelMaterial5);
	  				Ext.getCmp('percentage5').setValue(parent.selectedAccessoryOthers.percentage5);
	  				Ext.getCmp('ctSupplyType').setValue(parent.selectedAccessoryOthers.ctSupplyType);
	  				if(ctAccessoryTypeCode == '15'){
	  					Ext.getCmp('azSet3').expand();
	  					Ext.getCmp('sequence').enable();
	  					Ext.getCmp('ctCareLabelMaterial1').enable();
	  					Ext.getCmp('percentage1').enable();
	  					Ext.getCmp('ctCareLabelMaterial2').enable();
	  					Ext.getCmp('percentage2').enable();
	  					Ext.getCmp('ctCareLabelMaterial3').enable();
	  					Ext.getCmp('percentage3').enable();
	  					Ext.getCmp('ctCareLabelMaterial4').enable();
	  					Ext.getCmp('percentage4').enable();
	  					Ext.getCmp('ctCareLabelMaterial5').enable();
	  					Ext.getCmp('percentage5').enable();
	  				}else{
	  					Ext.getCmp('azSet3').collapse();
	  					Ext.getCmp('sequence').disable();
	  					Ext.getCmp('ctCareLabelMaterial1').disable();
	  					Ext.getCmp('percentage1').disable();
	  					Ext.getCmp('ctCareLabelMaterial2').disable();
	  					Ext.getCmp('percentage2').disable();
	  					Ext.getCmp('ctCareLabelMaterial3').disable();
	  					Ext.getCmp('percentage3').disable();
	  					Ext.getCmp('ctCareLabelMaterial4').disable();
	  					Ext.getCmp('percentage4').disable();
	  					Ext.getCmp('ctCareLabelMaterial5').disable();
	  					Ext.getCmp('percentage5').disable();
	  				}
	  			}
	  			
	  			var sizes;
	              if('04' != piRecord.data.ctStatureCode){
					sizes = getMeasureSpecificationItemName(piRecord.data.ctStatureCode);
				}else{
					sizes = ['S1', 'S2', 'M1', 'M2', 'L1', 'L2'];
				}
	  			var allRecord = new Ext.data.Record();
				allRecord.data = new Array();
				allRecord.set('code', 'all');
				allRecord.set('description', aoMessage.get('ui.accessoryothers.forall'));  
				
				var sizeArray = new Array();
				sizeArray.push(allRecord);
            
	            var forSizeStore = new Ext.data.Store({
	                   
	                    reader: new Ext.data.XmlReader({
	                        record: 'item',
	                        id: 'code',
	                        totalRecords: 'itemTotal'
	                    }, [
	                    'code', 'description']),
						data: []
	                });
                
           
            for(var i = 0; i < sizes.length; i ++){
            	var newRecord = new Ext.data.Record();
				newRecord.data = new Array();
				newRecord.set('code', sizes[i]);
				newRecord.set('description', sizes[i]);  
            	sizeArray.push(newRecord);
            }
             forSizeStore.add(sizeArray);
			var forSizeCombo = new Ext.form.ComboBox({
					fieldLabel: aoMessage.get('ui.accessoryothers.forsize'),
					id: 'forSize',
					name: 'forSize',
					editable: false,
					valueField: 'code',
				    store: forSizeStore,
				    displayField:'description',
				    anchor: '76%',
					width: '80%',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
				    selectOnFocus:true,
					mode: 'local'
				});
			
			forSizeCombo.setValue('all');

			var variantXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=300&id=' + idValue);
			 var variantStore = new Ext.data.Store({
	                
	                reader: new Ext.data.XmlReader({
	                    record: 'item',
	                    id: 'code',
	                    totalRecords: 'itemTotal'
	                }, [
	                'code', 'description']),
					data: variantXmlLoader.getXml()
	            });
			 variantStore.insert(0, [allRecord]);
			var variantCombo = new Ext.form.ComboBox({
				fieldLabel: dzColorMessage.get('ui.dzcolor.variant'),
				id: 'variant',
				name: 'variant',
				editable: false,
				valueField: 'code',
			    store: variantStore,
			    displayField:'description',
			    triggerAction: 'all',
			    allowBlank: false,
			    emptyText: message.get('message.combo.pleaseselect'),
			    selectOnFocus:true,
				mode: 'local',
				anchor: '76%',
				width: '80%'
			});
			variantCombo.setValue('all');
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                //itemTpl.append('productIdentification', piRecord.data);
                
				piAoForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/ProductAccessoryOthersServlet?action=1',
                    frame: true,
                    title: aoMessage.get('ui.accessoryothers.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 105,
                    collapsible: true,
                    //collapsed: true,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'aoId',
                        mapping: 'aoId'
                    }, {
                        name: 'applicationReference',
                        mapping: 'applicationReference'
                    }, {
                        name: 'ctApplicationType',
                        mapping: 'ctApplicationType'
                    }, {
                        name: 'accessoryReference',
                        mapping: 'accessoryReference'
                    },{
                        name: 'ctAccessoryType',
                        mapping: 'ctAccessoryType'
                    },{
                        name: 'ctSupplyType',
                        mapping: 'ctSupplyType'
                    },{
                        name: 'customerReference',
                        mapping: 'customerReference'
                    },{
                        name: 'customerColor',
                        mapping: 'customerColor'
                    },{
                        name: 'unitNumber',
                        mapping: 'unitNumber'
                    },{
                        name: 'comment',
                        mapping: 'comment'
                    },{
                        name: 'sequence',
                        mapping: 'sequence'
                    },{
                        name: 'ctCareLabelMaterial1',
                        mapping: 'ctCareLabelMaterial1'
                    },{
                        name: 'percentage1',
                        mapping: 'percentage1'
                    },{
                        name: 'ctCareLabelMaterial2',
                        mapping: 'ctCareLabelMaterial2'
                    },{
                        name: 'percentage2',
                        mapping: 'percentage2'
                    },{
                        name: 'ctCareLabelMaterial3',
                        mapping: 'ctCareLabelMaterial3'
                    },{
                        name: 'percentage3',
                        mapping: 'percentage3'
                    },{
                        name: 'ctCareLabelMaterial4',
                        mapping: 'ctCareLabelMaterial4'
                    },{
                        name: 'percentage4',
                        mapping: 'percentage4'
                    },{
                        name: 'ctCareLabelMaterial5',
                        mapping: 'ctCareLabelMaterial5'
                    },{
                        name: 'percentage5',
                        mapping: 'percentage5'
                    },{
                    	name:'ctAccessoryTypeCode',
                    	mapping:'ctAccessoryTypeCode'
                    },{
                    	name: 'forSize',
                    	mapping:'forSize'
                    },{
						name: 'variant',
						mapping:'variant'
                    },{
						name: 'supplier',
						mapping:'supplier'
                    },{
						name: 'factoryNameCN',
						mapping:'factoryNameCN'
                    },{
						name: 'factoryNameEN',
						mapping:'factoryNameEN'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'aoId',
                        name: 'aoId',
                        xtype: 'hidden'
                    }, {
                        id: 'piId',
                        name: 'piId',
						value: piRecord.data.id,
                        xtype: 'hidden'
                    }, {
                        id: 'ctAccessoryTypeCode',
                        name: 'ctAccessoryTypeCode',
                        xtype: 'hidden'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                name: 'applicationReference',
                                id: 'applicationReference',
                                fieldLabel: aoMessage.get('ui.accessoryothers.reference'),
                                xtype: 'textfield',
                                anchor: '86%',
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
								readOnly: true,
								emptyText: message.get('message.combo.pleaseselect'),
                                listeners: {
                                    'render': {
                                        fn: function(){
                                            Ext.getCmp('applicationReference').getEl().on('click', function(){
                                                parent.selectAccessoryOthers(selectAccessoryOthersCallback);
                                            }, this);
                                        },
                                        scope: this
                                    }
                                }
                            }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								   id: 'ctApplicationType',
                                   name: 'ctApplicationType',
                                   fieldLabel: aoMessage.get('ui.accessoryothers.application'),
                                   xtype: 'textfield',
                                   anchor: '86%',
								   width: '90%',
                                   blankText: message.get('message.edit.noblank'),
                                   maxLength: 256,
							       readOnly: true
                               }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								   id: 'accessoryReference',
                                   name: 'accessoryReference',
                                   fieldLabel: aoMessage.get('ui.accessoryothers.reference'),
                                   xtype: 'textfield',
                                   anchor: '86%',
								   width: '90%',
                                   blankText: message.get('message.edit.noblank'),
                                   maxLength: 256,
							       readOnly: true
                               }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								   id: 'ctAccessoryType',
                                   name: 'ctAccessoryType',
                                   fieldLabel: aoMessage.get('ui.accessoryothers.type'),
                                   xtype: 'textfield',
                                   anchor: '86%',
								   width: '90%',
                                   blankText: message.get('message.edit.noblank'),
                                   maxLength: 256,
							       readOnly: true
                               }]
                        }]
                    
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
							      id: 'customerReference',
                                  name: 'customerReference',
                                  fieldLabel: aoMessage.get('ui.accessoryothers.customerreference'),
                                  xtype: 'textfield',
                                  anchor: '86%',
							      width: '90%',
                                  blankText: message.get('message.edit.noblank'),
                                  maxLength: 256,
                                  readOnly: true
                              },{
							      id: 'unitNumber',
                                  name: 'unitNumber',
                                  fieldLabel: message.get('message.action.unitnumber') + '<span id="unitNumberSpan"></span>',
                                  decimalPrecision: 0,
                                  xtype: 'numberfield',
                                  allowBlank: false,
                                  anchor: '86%',
							      width: '90%',
                                  blankText: message.get('message.edit.noblank'),
                                  maxLength: 256
                              }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
							      id: 'customerColor',
                                  name: 'customerColor',
                                  fieldLabel: aoMessage.get('ui.accessoryothers.customercolor'),
                                  xtype: 'textfield',
                                  anchor: '86%',
							      width: '90%',
                                  blankText: message.get('message.edit.noblank'),
                                  maxLength: 256,
                                  readOnly: true
                              },forSizeCombo]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'factoryNameCN',
                                name: 'factoryNameCN',
                                fieldLabel: fMessage.get('ui.factory.name'),
                                xtype: 'textfield',
                                anchor: '86%',
                                readOnly: true,
                                maxLength: 256
                            },variantCombo]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'factoryNameEN',
                                name: 'factoryNameEN',
								hideLabel: true,
                                fieldLabel: '',
                                labelSeparator: '',
                                xtype: 'textfield',
                                anchor: '86%',
                                readOnly: true,
                                maxLength: 256
                            },{
                                id: 'ctSupplyType',
                                name: 'ctSupplyType',
                                fieldLabel: message.get('message.edit.buyer'),
                                xtype: 'textfield',
                                anchor: '86%',
                                readOnly: true,
                                maxLength: 256
                            }]
                        }]
                    
                    }, {
                        xtype: 'fieldset',
                        collapsible: true,
                        collapsed: true,
                        id: 'azSet3',
                        title: aoMessage.get('ui.accessoryothers.set3'),
                        autoHeight: true,
                        items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .2,
                                layout: 'form',
                                items: [{
                                    xtype: 'numberfield',
                                    fieldLabel: message.get('message.edit.sequence'),
                                    id: 'sequence',
                                    name: 'sequence',
                                    anchor: '86%',
                                    allowBlank: false,
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                }]
                            },{
                                columnWidth: .4,
                                layout: 'form',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.materialtype')+'1',
                                    id: 'ctCareLabelMaterial1',
                                    name: 'ctCareLabelMaterial1',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.materialtype')+'2',
                                    id: 'ctCareLabelMaterial2',
                                    name: 'ctCareLabelMaterial2',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.materialtype')+'3',
                                    id: 'ctCareLabelMaterial3',
                                    name: 'ctCareLabelMaterial3',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.materialtype')+'4',
                                    id: 'ctCareLabelMaterial4',
                                    name: 'ctCareLabelMaterial4',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.materialtype')+'5',
                                    id: 'ctCareLabelMaterial5',
                                    name: 'ctCareLabelMaterial5',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                }]
                            }, {
                                columnWidth: .4,
                                layout: 'form',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '1&nbsp;(%)',
                                    id: 'percentage1',
                                    name: 'percentage1',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '2&nbsp;(%)',
                                    id: 'percentage2',
                                    name: 'percentage2',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '3&nbsp;(%)',
                                    id: 'percentage3',
                                    name: 'percentage3',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '4&nbsp;(%)',
                                    id: 'percentage4',
                                    name: 'percentage4',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: message.get('message.edit.precentage') + '5&nbsp;(%)',
                                    id: 'percentage5',
                                    name: 'percentage5',
                                    readOnly: true,
                                    anchor: '86%',
                                    disabled:true,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64,
                                    tabIndex: 1
                                }]
                            }]
                        }]
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (piAoForm.getForm().isValid()) {
                            	document.getElementsByName('forSize')[0].value = forSizeCombo.getValue();
                            	document.getElementsByName('variant')[0].value = variantCombo.getValue();
                                piAoForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        piAoStore.reload();
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        piAoForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            piAoForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                        	if(input == 'history'){
								if (startPage != null) {
	                                parent.window.location = 'product_identification_history_list.html?startPage=' + startPage;
	                            }else {
	                                parent.window.location = 'product_identification_history_list.html';
	                            }
	                            return;
							}
                            if (startPage != null) {
                                parent.window.location = 'product_identification_list.html?startPage=' + startPage;
                            }
                            else {
                                parent.window.location = 'product_identification_list.html';
                            }
                        }
                    }]
                });
				piAoForm.render('piAccessoryOthersForm');
				
				piAoStore = new Ext.data.GroupingStore({
                    url: '../../servlet/ProductAccessoryOthersServlet?action=5&id=' + piRecord.data.id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['index','id', 'aoReference', 
						'ctAccessoryType', 'accessoryReference','ctApplicationType', 'applicationReference', 'customerReference','comment', 'ctSupplyType',
						{
							name:'unitNumber',
							type: 'int'
						},{
							name:'stock',
							type: 'int'
						},{
							name:'total',
							type: 'int'
						},'ctCareLabelMaterial', 'percentage','sequence','ctMaterialType', 'factoryNameCN','factoryNameEN','photo1Name', 'photo2Name',
						 'ctCareLabelMaterial', 'percentage', 'descriptionCN','descriptionFR','descriptionEN'
						 ,'customerReference', 'customerColor','variant','supplier',
						 'factoryReference', 'factoryColor','forSize'  ]),
						
						sortInfo:{
	                    	field: 'ctAccessoryType',
	                    	direction: 'ASC'
	                    },
	                    
                   	groupField: 'ctAccessoryType'
                });

				var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
						'<br/><p><b>' + message.get('message.edit.materialtype') + ':</b>&nbsp;&nbsp;{ctMaterialType}',
						'</p><br/>',
						'<b>' + message.get('message.edit.factoryname') + ':</b>&nbsp;&nbsp;{factoryNameCN}&nbsp;&nbsp;&nbsp;&nbsp;{factoryNameEN}',
						//'<b>' + aoMessage.get('ui.accessoryothers.factoryreference') + ':</b>&nbsp;&nbsp;{factoryReference}&nbsp;&nbsp;&nbsp;&nbsp;',
						//'<b>' + aoMessage.get('ui.accessoryothers.factorycolor') + ':</b>&nbsp;&nbsp;{factoryColor}&nbsp;&nbsp;&nbsp;&nbsp;',
						'</p><br/>',
						'{[this.getCareLabel(values)]}',
			        	'<p><img src="../../_temp/{photo1Name}" width="150px" style="cursor: hand;" onclick="parent.openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
						'<img src="../../_temp/{photo2Name}" width="150px" style="cursor: hand;" onclick="parent.openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;',
						'</p>', 
						'<br/><p><b>' + message.get('message.edit.descriptionfr') + ':</b> {descriptionFR}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptioncn') + ':</b> {descriptionCN}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptionen') + ':</b> {descriptionEN}</p><br/>',{
						     getCareLabel: function(values){
						     	 var rtn = '';
							     if(values.ctCareLabelMaterial != ''){
								     rtn += '<p><b>';
									 rtn += aoMessage.get('ui.accessoryothers.set3') + ':</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage
								     rtn += '</p><br/>'
							     }
							     return rtn;
					         
					     }
						}
			        )
			    });

				piAoGrid = new Ext.grid.GridPanel({
                    title: aoMessage.get('ui.accessoryothers.listtitle'),
                    store: piAoStore,
                    plugins: [expander],
                    stripeRows: true,
                    height: 700,
                    columns: [
                    /*{
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false,
                    },*/expander,
                    {
                        header: aoMessage.get('ui.accessoryothers.application'),
                        dataIndex: 'ctApplicationType'
                    },{
                        header: aoMessage.get('ui.accessoryothers.reference'),
                        dataIndex: 'applicationReference'
                    },{
                        header: aoMessage.get('ui.accessoryothers.type'),
                        dataIndex: 'ctAccessoryType'
                    },{
                        header: aoMessage.get('ui.accessoryothers.reference'),
                        dataIndex: 'accessoryReference'
                    },{
                        header: aoMessage.get('ui.accessoryothers.customerreference'),
                        dataIndex: 'customerReference'
                    },{
                        header: aoMessage.get('ui.accessoryothers.customercolor'),
                        dataIndex: 'customerColor'
                    },{
                        header: message.get('message.action.unitnumber'),
                        dataIndex: 'unitNumber',
						groupable: false
                    },{
                        header: aoMessage.get('ui.accessoryothers.forsize'),
                        dataIndex: 'forSize',
						groupable: false,
						renderer: function(value, p, record){
							if(value == 'all'){
								return aoMessage.get('ui.accessoryothers.forall')
							}else{
								return value;
							}
						}
                    },{
                        header: dzColorMessage.get('ui.dzcolor.variant'),
                        dataIndex: 'variant',
						groupable: false,
						renderer: function(value, p, record){
							if(value == 'all'){
								return aoMessage.get('ui.accessoryothers.forall')
							}else{
								return value;
							}
						}
                    },{
                        header:  message.get('message.edit.buyer'),
                        dataIndex: 'supplier',
						groupable: false
                    },{
                        header: message.get('message.list.eidt'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderDelete
                    }],
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: true,
						enableNoGroups:false,
                        groupTextTpl: '{text} &nbsp;&nbsp;&nbsp;&nbsp;({[values.rs.length]} {[values.rs.length > 1 ? "Articles" : "Article"]})'
                    }),
                    loadMask: true,
                    renderTo: 'piAccessoryOthersList'
                });
				
				piAoStore.load();
				
                
            });
			
			function renderEdit(value, p, record){
                    return String.format('<a href="javascript:piAoForm.expand(true); editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="Edition" /></a>', record.id);
                }
                
            function renderDelete(value, p, record){
                return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="Supprimer"/></a>', record.id);
            }
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/ProductAccessoryOthersServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                piAoStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				piAoForm.getForm().load({
					url:'../../servlet/ProductAccessoryOthersServlet?action=3&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						if(Ext.getCmp('ctAccessoryTypeCode').getValue() == '15'){
							Ext.getCmp('azSet3').expand();
							Ext.getCmp('sequence').enable();
							Ext.getCmp('ctCareLabelMaterial1').enable();
							Ext.getCmp('percentage1').enable();
							Ext.getCmp('ctCareLabelMaterial2').enable();
							Ext.getCmp('percentage2').enable();
							Ext.getCmp('ctCareLabelMaterial3').enable();
							Ext.getCmp('percentage3').enable();
							Ext.getCmp('ctCareLabelMaterial4').enable();
							Ext.getCmp('percentage4').enable();
							Ext.getCmp('ctCareLabelMaterial5').enable();
							Ext.getCmp('percentage5').enable();
						}else{
							Ext.getCmp('azSet3').collapse();
							Ext.getCmp('sequence').disable();
							Ext.getCmp('ctCareLabelMaterial1').disable();
							Ext.getCmp('percentage1').disable();
							Ext.getCmp('ctCareLabelMaterial2').disable();
							Ext.getCmp('percentage2').disable();
							Ext.getCmp('ctCareLabelMaterial3').disable();
							Ext.getCmp('percentage3').disable();
							Ext.getCmp('ctCareLabelMaterial4').disable();
							Ext.getCmp('percentage4').disable();
							Ext.getCmp('ctCareLabelMaterial5').disable();
							Ext.getCmp('percentage5').disable();
						}
					}
				});
			}
			
        </script>
    </head>
    <body style="margin: 0 0 0 0;">
        <div id="productIdentification">
        </div>
        <div id="piAccessoryOthersForm">
        </div>
		 <div id="piAccessoryOthersList" style="margin-top: 5px;">
        </div>
    </body>
</html>
